<template>
  <el-container style="height: 100%">
    <el-aside width="200px">
      <el-menu :default-openeds='["1"]' router>
        <!-- 用户管理 -->
        <el-submenu index="1">
          <template slot="title">用户管理</template>
          <el-menu-item index="/home/usermanage">用户管理</el-menu-item>
        </el-submenu>
        <!-- 权限管理 -->
        <el-submenu index="2">
          <template slot="title">权限管理</template>
          <el-menu-item index="/home/qx">权限管理</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>Header</el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
      <el-footer style="background: black; color: #fff; line-height: 60px">Footer</el-footer>
    </el-container>
  </el-container>
</template>

<script>
import Test from '@/components/test'
import { mapState } from 'vuex'
import { mySum, myCj } from '@/utils/sum.js'
import { storageSet, storageGet } from '@/utils/storage.js'
import ChildTodo from '@/components/childTodo'
import Friuts from '@/components/Friuts'
export default {
  name: 'Home',
  data() {
    return {
      userInput: {
        name: '',
        age: '',
      },
      userList: [
        {
          name: '张三',
          age: 18,
        },
      ],
      N: 10,
      keyword: '',
      searchParams: {
        order: '1:desc',
      },
      userName: '111',
      passWord: '222',
      msg: storageGet('childComponentData'),
      todos: [
        { id: 1, name: '吃饭', iscomplete: true },
        { id: 2, name: '睡觉', iscomplete: false },
        { id: 3, name: '游戏', iscomplete: true },
        { id: 4, name: '打豆豆', iscomplete: true },
      ],
      friuts: [
        { id: 1, name: '苹果' },
        { id: 2, name: '香蕉' },
        { id: 3, name: '橘子' },
        { id: 4, name: '西瓜' },
      ],
      aaaa: '',
      bbbb: '',
    }
  },
  // beforeRouteEnter(to, from, next) {
  //   console.log('路由进入之前')
  //   next()
  // },
  // beforeRouteLeave(to, from, next) {
  //   console.log('路由离开之前')
  //   next()
  // },
  components: {
    Test,
    ChildTodo,
    Friuts,
  },
  methods: {
    addUser() {
      //JSON.parse(JSON.stringify(this.userInput))
      this.userList.push(Object.assign({}, this.userInput))
    },
    handleDispatch() {
      this.$store.dispatch('sum', this.N)
    },
    logout() {
      this.$router.push('/login')
      window.sessionStorage.clear()
      this.$message({
        message: '退出成功',
      })
    },
    jian() {
      if (this.$store.state.count.n > 0) {
        this.$store.state.count.n -= this.N
      }
    },
    add() {
      this.$store.state.count.n += this.N
    },
    //排序
    sort(flag) {
      //先获取初始状态参数
      let orgin = this.searchParams.order
      // alert(orgin)
      //代表综合
      let orginFlag = orgin.split(':')[0]
      let orginSort = orgin.split(':')[1]
      // console.log(orginFlag,orginSort)
      let newOrder = ''
      if (flag == orginFlag) {
        //点击的是综合
        newOrder = `${orginFlag}:${orginSort == 'desc' ? 'asc' : 'desc'}`
      } else {
        //点击的是价格
        newOrder = `${flag}:${'desc'}`
      }
      this.searchParams.order = newOrder
    },
    test() {
      console.log('test')
    },
    test2(data) {
      console.log('我是子组件传递过来的数据:', data)
      // localStorage.setItem('childComponentData',data)
      storageSet('childComponentData', data)
      this.msg = data
    },
    myname() {
      this.$bus.$on('handle', (obj) => {
        return (this.userName = obj.name)
      })
    },
    mypass() {
      this.$bus.$on('handle', (obj) => {
        return (this.passWord = obj.pass)
      })
    },
  },
  mounted() {
    this.$bus.$on('handle', (obj) => {
      // console.log(obj)
      const { name, pass } = obj
      console.log('----', name, pass)
      this.aaaa = obj.name
      this.bbbb = obj.pass
      console.log('this.aaaa:', this.aaaa)
      console.log('this.bbbb:', this.bbbb)
    })

    // console.log(this.$refs.childRef)
    // console.log(this.$children)
    // console.log(this.$parent)
  },
  computed: {
    //商品筛选
    filterUserList() {
      return this.userList.filter((item) => {
        return item
      })
    },
    //是否综合
    isOne() {
      return this.searchParams.order.indexOf('1') != -1
    },
    //是否价格
    isTwo() {
      return this.searchParams.order.indexOf('2') != -1
    },
    //是否降序
    isDesc() {
      return this.searchParams.order.indexOf('desc') != -1
    },
    //是否升序
    isAsc() {
      return this.searchParams.order.indexOf('asc') != -1
    },
    ...mapState({
      a: (state) => state.module01.a,
      b: (state) => state.module01.b,
    }),
    sum() {
      return mySum(10, 20)
    },
    cj() {
      return myCj(10, 20)
    },
    Name() {
      return this.myname()
    },
    Pass() {
      return this.mypass()
    },
  },
}
</script>

<style lang="less">
// @font-face {
//   font-family: myFont;
//   src: url('../assets/font/Font.ttf');

// }
.home-container {
  height: 100%;
}
.el-header {
  background: #0c0c0c;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.el-aside {
  background: #0f0f0f;
  color: #fff;
  padding-left: 0;
  padding-top:60px;
}
.el-menu {
  background: transparent;
  border-right: none !important;
  .el-menu-item{
    color: #fff;
  }
  .el-submenu__title{
    color:#fff;
  }
}
.el-submenu__title:hover{
  background-color: blue;
}
.el-menu-item:hover{
  background-color: blue;
}
.el-menu-item:active{
  background-color: blue;
}
.el-menu-item:focus{
  background-color: blue;
}
.el-button.curr {
  background: red;
  color: #fff;
}
.p {
  font-size: 24px;
  span {
    color: skyblue;
  }
  .myfont {
    font-family: myFont;
  }
}
</style>
